<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>个人资料 - 家电维修系统</title>
    <link th:href="@{/css/bootstrap.min.css}" rel="stylesheet">
    <script th:src="@{/js/bootstrap.bundle.min.js}"></script>

    <style>
        #map {
            height: 400px;
            width: 100%;
            margin-bottom: 20px;
        }
        .profile-container {
            max-width: 800px;
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
        <div class="container">
            <a class="navbar-brand" href="/">家电维修系统</a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav me-auto">
                    <li class="nav-item">
                        <a class="nav-link" href="/">首页</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="/orders">我的订单</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link active" href="/profile">个人资料</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="/announcements">公告</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="/forum">论坛</a>
                    </li>
                </ul>
                <div class="d-flex">
                    <span class="navbar-text me-3" id="userInfo"></span>
                    <button class="btn btn-outline-light" onclick="logout()">退出</button>
                </div>
            </div>
        </div>
    </nav>

    <div class="container mt-4">
        <div class="profile-container">
            <div class="card">
                <div class="card-header">
                    <h5 class="card-title mb-0">个人资料</h5>
                </div>
                <div class="card-body">
                    <form id="profileForm">
                        <div class="mb-3">
                            <label for="username" class="form-label">用户名</label>
                            <input type="text" class="form-control" id="username" readonly>
                        </div>
                        <div class="mb-3">
                            <label for="realName" class="form-label">真实姓名</label>
                            <input type="text" class="form-control" id="realName" required>
                        </div>
                        <div class="mb-3">
                            <label for="phone" class="form-label">手机号码</label>
                            <input type="tel" class="form-control" id="phone" required>
                        </div>
                        <div class="mb-3">
                            <label for="email" class="form-label">电子邮箱</label>
                            <input type="email" class="form-control" id="email" required>
                        </div>
                        <div class="mb-3">
                            <label for="address" class="form-label">地址</label>
                            <div class="input-group">
                                <input type="text" class="form-control" id="address" required>
                                <button type="button" class="btn btn-outline-secondary" onclick="getCurrentLocation()">获取当前位置</button>
                            </div>
                        </div>
                        <div id="map"></div>
                        <div class="mb-3">
                            <label for="oldPassword" class="form-label">原密码</label>
                            <input type="password" class="form-control" id="oldPassword">
                        </div>
                        <div class="mb-3">
                            <label for="newPassword" class="form-label">新密码</label>
                            <input type="password" class="form-control" id="newPassword">
                        </div>
                        <button type="submit" class="btn btn-primary">保存修改</button>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.1.3/js/bootstrap.bundle.min.js"></script>
    <script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&ak=spEZ8x14LoDN10ejoQD7GdxOEJYOwqcw"></script>
    <script src="/js/request.js"></script>
    <script>
        let map;
        let marker;
        let currentUser = null;

        // 初始化地图
        function initMap() {
            map = new BMap.Map("map");
            const point = new BMap.Point(116.404, 39.915);
            map.centerAndZoom(point, 12);
            map.enableScrollWheelZoom(true);
            
            // 添加点击事件
            map.addEventListener("click", function(e) {
                if (marker) {
                    map.removeOverlay(marker);
                }
                marker = new BMap.Marker(e.point);
                map.addOverlay(marker);
                
                // 获取地址
                const geocoder = new BMap.Geocoder();
                geocoder.getLocation(e.point, function(rs) {
                    if (rs) {
                        $('#address').val(rs.address);
                    }
                });
            });
        }

        // 获取当前位置
        function getCurrentLocation() {
            if (navigator.geolocation) {
                navigator.geolocation.getCurrentPosition(
                    function(position) {
                        const point = new BMap.Point(position.coords.longitude, position.coords.latitude);
                        map.centerAndZoom(point, 15);
                        
                        if (marker) {
                            map.removeOverlay(marker);
                        }
                        marker = new BMap.Marker(point);
                        map.addOverlay(marker);
                        
                        // 获取地址
                        const geocoder = new BMap.Geocoder();
                        geocoder.getLocation(point, function(rs) {
                            if (rs) {
                                $('#address').val(rs.address);
                            }
                        });
                    },
                    function(error) {
                        alert('获取位置失败：' + error.message);
                    }
                );
            } else {
                alert('您的浏览器不支持地理定位');
            }
        }

        // 获取用户信息
        function getUserInfo() {
            if (!checkLoginStatus()) return;

            $.ajax({
                url: '/api/user/profile',
                type: 'GET',
                success: function(response) {
                    currentUser = response;
                    $('#username').val(response.username);
                    $('#realName').val(response.realName);
                    $('#phone').val(response.phone);
                    $('#email').val(response.email);
                    $('#address').val(response.address);
                    
                    // 如果有地址，在地图上显示
                    if (response.address) {
                        const geocoder = new BMap.Geocoder();
                        geocoder.getPoint(response.address, function(point) {
                            if (point) {
                                map.centerAndZoom(point, 15);
                                if (marker) {
                                    map.removeOverlay(marker);
                                }
                                marker = new BMap.Marker(point);
                                map.addOverlay(marker);
                            }
                        });
                    }
                }
            });
        }

        // 提交表单
        $('#profileForm').on('submit', function(e) {
            e.preventDefault();
            
            if (!checkLoginStatus()) return;
            
            const formData = {
                id: currentUser.id,
                realName: $('#realName').val(),
                phone: $('#phone').val(),
                email: $('#email').val(),
                address: $('#address').val()
            };

            // 如果输入了新密码，则更新密码
            const newPassword = $('#newPassword').val();
            if (newPassword) {
                formData.oldPassword = $('#oldPassword').val();
                formData.newPassword = newPassword;
            }

            $.ajax({
                url: '/api/user/profile',
                type: 'PUT',
                contentType: 'application/json',
                data: JSON.stringify(formData),
                success: function() {
                    alert('保存成功！');
                },
                error: function(xhr) {
                    alert('保存失败：' + xhr.responseText);
                }
            });
        });

        // 退出登录
        function logout() {
            localStorage.removeItem('token');
            window.location.href = '/login';
        }

        // 页面加载完成后初始化
        $(document).ready(function() {
            if (checkLoginStatus()) {
                initMap();
                getUserInfo();
            }
        });
    </script>
</body>
</html> 